<template>
  <!-- 品牌详情-热度分析组件 88/93-->
  <div id="TheHeatAnalysis">
    <div class="vip_pay_box" v-if="!vipRootObj[88][93].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip
          routerName="FansPortrait"
          :lowestVipNum="vipRootObj[88][93].ownerMinLevel"
        />
      </div>
    </div>
    <template v-else>
      <div class="time_slot">
        <radio_group01
          :radio_values="['近7天', '30天', '90天']"
          v-model="value01"
          class="tab01"
        />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="dataNum">
        <div class="header">
          <div class="line"></div>
          <span>关联数据</span>
        </div>
        <div class="dataBox">
          <div class="boxNum" v-if="baseData">
            <div class="data_item">
              <span>{{ format_num(baseData.authors) }}</span>
              <p>关联达人总数</p>
            </div>
            <div class="data_item">
              <span>{{ format_num(baseData.awemes) }}</span>
              <p>关联视频数</p>
            </div>
            <div class="data_item">
              <span>{{ format_num(baseData.lives) }}</span>
              <p>关联直播数</p>
            </div>
          </div>
        </div>
      </div>
      <div class="box-top" v-if="heatindexs.length != 0 && y1Data01[0] != '-'">
        <div class="line"></div>
        <span>热度指数</span>
        <span class>数据取自{{ dateTime }}</span>
      </div>

      <div class="top" v-if="heatindexs.length != 0">
        <div class="heatData">
          <div class="Item1">
            <div>{{ heatindexs.hot }}</div>
            <div>热度指数</div>
          </div>
          <div class="Item1">
            <div>
              <img
                src="@/assets/li/arrows.png"
                alt
                v-if="heatindexs.increase < 0"
              />
              <img
                src="@/assets/li/top.png"
                alt
                v-if="heatindexs.increase > 0"
              />
              <span style="color: #1779ff" v-if="heatindexs.increase < 0">{{
                formatRate(Math.abs(heatindexs.increase), 2)
              }}</span>
              <span style="color: red" v-if="heatindexs.increase > 0">{{
                formatRate(heatindexs.increase, 2)
              }}</span>
              <span style="color: #888888" v-if="heatindexs.increase == 0"
                >--</span
              >
            </div>
            <div>指数涨幅</div>
          </div>
        </div>
        <div class="heatChart">
          <div class="chartBox" v-if="!finish01 && xData01.length != 0">
            <KChart
              :xData="xData01"
              :series1="y1Data01"
              name1="热度指数"
              v-if="xData01.length != 0 && y1Data01 != null"
            />
          </div>
          <div
            v-loading="finish01"
            v-if="finish01"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>

          <div class="empty noData" v-if="!finish01 && xData01.length == 0">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div class="pie">
        <div class="left">
          <div class="header">
            <div class="line"></div>
            <span>带货达人行业</span>
          </div>
          <div class="pie-01" v-if="!finish02 && industryValue.length">
            <BigPie :valueData="industryValue" />
          </div>
          <div
            v-loading="finish02"
            v-if="finish02"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            style="margin-top: 80px"
          ></div>
          <div
            class="empty noData"
            v-if="!finish02 && industryValue.length == 0"
          >
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
        <div class="right">
          <div class="header">
            <div class="line"></div>
            <span>商品类目分布</span>
          </div>
          <div class="pie-01" v-if="!finish02 && categoryValue.length">
            <BigPie :valueData="categoryValue" v-if="categoryValue.length" />
          </div>
          <div
            v-loading="finish02"
            v-if="finish02"
            class="loading loading01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            style="margin-top: 80px"
          ></div>
          <div
            class="empty noData"
            v-if="!finish02 && categoryValue.length == 0"
          >
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div class="lineAhart-01">
        <div class="lineAhart_box">
          <div class="header">
            <div class="line"></div>
            <span>关联视频</span>
          </div>
          <div class="lineAhart-01-1">
            <KChart
              :xData="xData02"
              :series1="y1Data02"
              name1="视频数"
              v-if="xData02.length != 0 && !xDataLoading"
            />
            <div
              v-loading="xDataLoading"
              v-if="xDataLoading"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="padding-top: 150px"
            ></div>
            <div
              class="empty noDataImg"
              v-if="xData02.length == 0 && !xDataLoading"
            >
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div class="lineAhart_box">
          <div class="header">
            <div class="line"></div>
            <span>关联直播</span>
          </div>
          <div class="lineAhart-01-1">
            <KChart
              :xData="xData02"
              :series1="y1Data03"
              name1="直播数"
              v-if="xData02.length != 0 && !xDataLoading"
            />
            <div
              v-loading="xDataLoading"
              v-if="xDataLoading"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="padding-top: 150px"
            ></div>
            <div
              class="empty noDataImg"
              v-if="xData02.length == 0 && !xDataLoading"
            >
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <div class="salesAhart">
        <div class="header">
          <div class="line"></div>
          <span>销量趋势图</span>
        </div>

        <div class="salesBox">
          <KChart
            v-if="xData02.length != 0 && !xDataLoading"
            :xData="xData02"
            :series1="y1Data05"
            name1="直播销量"
          />
          <div
            v-loading="xDataLoading"
            v-if="xDataLoading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            style="padding-top: 150px"
          ></div>
          <div
            class="empty noDataImg"
            v-if="xData02.length == 0 && !xDataLoading"
          >
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>

      <div class="list">
        <div class="header">
          <div class="line"></div>
          <span>品牌数据详情</span>
        </div>
        <ul class="list_top">
          <li>
            <div>日期</div>
            <div>商品数</div>
            <div>直播销量</div>
            <div>直播销售额</div>
            <div>关联达人</div>
            <div>关联视频数</div>
            <div>关联直播数</div>
          </li>
        </ul>

        <ul class="list_bottom" v-if="brandList.length != 0 && !loading">
          <li v-for="(item, index) in brandList" :key="'a' + index">
            <div>{{ item.summaryDate.substring(0, 10) }}</div>
            <div>{{ format_num(item.productTotal) }}</div>
            <div>{{ format_num(item.salesLive) }}</div>
            <div>{{ format_num(item.salesLivePrice) }}</div>
            <div>{{ format_num(item.authors) }}</div>
            <div>{{ format_num(item.awemes) }}</div>
            <div>{{ format_num(item.lives) }}</div>
          </li>
        </ul>
        <div
          v-loading="loading"
          v-if="loading"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
          style="margin-top: 20px"
        ></div>
        <div class="empty" v-if="brandList.length == 0 && !loading">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="10"
            :current-page="page"
            @current-change="dataList"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
import KChart from "@/pages/wang/talent/tdetails/NewComponents/KChart.vue";
export default {
  data() {
    return {
      value01: "30天",
      liveTime: [],
      pickerOptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      count: 0,
      page: 1,
      //带货大人行业饼图
      industryValue: [],
      //商品类目分布
      categoryValue: [],
      finish02: false,
      //热度指数
      heatindexs: [],
      //热度指数折线图
      xData01: [],
      y1Data01: [],
      finish01: false,
      //关联视频直播折线图
      xData02: [],
      y1Data02: [],
      y1Data03: [],
      //销量折线图
      y1Data05: [],
      xDataLoading: false,
      //品牌数据
      brandList: [],
      loading: false,
      time: "",
      period: [],
      startDateTime: "",
      endDateTime: "",
      dateTime: "",
      baseData:null,
      cancelDetailsNew:null,
      cancelHotIndex:null,
      cancelHeatTrend:null,
      cancelVocation:null,
      cancelLiveTrend:null,
      cancelDataList:null,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  components: { BigPie, KChart },
  computed: {
    changeData() {
      const { value01 } = this;
      return {
        value01,
      };
    },
  },

  watch: {
    value01: function (newVal, oldVal) {
      let starttime;
      let endDate;
      switch (this.value01) {
        case "近7天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 7, "Y-M-D");
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "30天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 30, "Y-M-D");
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "90天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 90, "Y-M-D");
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        default:
          starttime = this.liveTime[0];
          endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [starttime, endDate];
      this.xData01 = [];
      this.y1Data01 = [];
      this.getHeatChart();
      this.industryValue = [];
      this.categoryValue = [];
      this.VocationTalent();
      this.xData02 = [];
      this.y1Data02 = [];
      this.y1Data03 = [];
      this.y1Data05 = [];
      this.LiveTrendData();
      this.page = 1;
      this.brandList = [];
      this.dataList();
      this.getBaseData();
    },
  },
  created() {
    if (this.vipRootObj[88][93].owner || this.heatindexs.length > 0) {
      this.dateTime = localStorage.getItem("date");
      this.getHeatData();
      this.getHeatChart();
      this.VocationTalent();
      this.LiveTrendData();
      this.dataList();
      this.getBaseData();
    }
  },

  methods: {
    onPick1() {
      this.value01 = "";
      this.xData01 = [];
      this.y1Data01 = [];
      this.getHeatChart();
      this.industryValue = [];
      this.categoryValue = [];
      this.VocationTalent();
      this.xData02 = [];
      this.y1Data02 = [];
      this.y1Data03 = [];
      this.y1Data05 = [];
      this.LiveTrendData();
      this.page = 1;
      this.brandList = [];
      this.dataList();
      this.getBaseData();
    },
    getBaseData() {
      let that = this;
      let starttime;
      let endtime;
      switch (this.value01) {
        case "近7天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 7, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "30天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 30, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "90天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 90, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        default:
          starttime = this.liveTime[0];
          endtime = this.liveTime[1];
          break;
      }
      this.$axios
        .get(
          "/api/Brand/DetailsNew",
          {
            params: {
              // brandId: "00e70f6a19075e2092926cf49f44c73f",
              brandId: this.$route.query.id,
              startDate: starttime,
              endDate: endtime,
            },
            cancelToken: new this.$axios.CancelToken(function executor(c) {
              if (that.cancelDetailsNew) {
                that.cancelDetailsNew();
              }
              that.cancelDetailsNew = c;
            }),
          },
        )
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data != null) {
              this.baseData = res.data.data;
            }
            // this.brandList = res.data.data;
            // console.log(this.brandList[0]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 热度指数
    getHeatData() {
      let that = this;
      this.startDateTime = localStorage.getItem("startDate");
      this.endDateTime = localStorage.getItem("endDate");
      this.$axios
        .get("/api/Brand/HotIndex", {
          params: {
            brandId: this.$route.query.id,
            startDate: this.startDateTime,
            endDate: this.endDateTime,
          },
          cancelToken: new this.$axios.CancelToken(function executor(c) {
            if (that.cancelHotIndex) {
              that.cancelHotIndex();
            }
            that.cancelHotIndex = c;
          }),
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data != null) {
              this.heatindexs = res.data.data;
            }
          } else {
            this.heatindexs = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 热度趋势图
    getHeatChart() {
      let that = this;
      this.finish01 = true;
      this.endDateTime = localStorage.getItem("endDate");
      let startDate;
      let endDate;
      let d = new Date(this.endDateTime);
      let T = d.getTime(d);
      switch (this.value01) {
        case "近7天":
          endDate = this.timestamp(T / 1000, "Y-M-D");
          startDate = this.timestamp(T / 1000 - 86400 * 7, "Y-M-D");
          break;
        case "30天":
          endDate = this.timestamp(T / 1000, "Y-M-D");
          startDate = this.timestamp(T / 1000 - 86400 * 30, "Y-M-D");
          break;
        case "90天":
          endDate = this.timestamp(T / 1000, "Y-M-D");
          startDate = this.timestamp(T / 1000 - 86400 * 90, "Y-M-D");
          break;
      }
      this.$axios
        .get("api/Brand/HeatTrend", {
          params: {
            brandId: this.$route.query.id,
            startDate: startDate,
            endDate: endDate,
          },
          cancelToken: new this.$axios.CancelToken(function executor(c) {
            if (that.cancelHeatTrend) {
              that.cancelHeatTrend();
            }
            that.cancelHeatTrend = c;
          })
        })
        .then((res) => {
          this.finish01 = false;
          if (res.data.code == 0) {
            if (res.data.data != null) {
              this.xData01 = res.data.data[0].map((element) => {
                return this.timestamp(element, "M/D");
              });
            }
            this.y1Data01 = res.data.data[1];
          } else {
            this.xData01 = [];
            this.y1Data01 = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //带货达人
    VocationTalent() {
      let that = this;
      this.finish02 = true;
      this.endDateTime = localStorage.getItem("endDate");
      let starttime;
      let endDate;
      let d = new Date(this.endDateTime);
      let T = d.getTime(d);
      switch (this.value01) {
        case "近7天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 7, "Y-M-D");
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "30天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 30, "Y-M-D");
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "90天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 90, "Y-M-D");
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        default:
          starttime = this.liveTime[0];
          endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [starttime, endDate];
      this.$axios
        .get("api/Brand/Vocation", {
          params: {
            //brandId: "bb1c90e29227e0360010454c07653524",
            brandId: this.$route.query.id,
            startDate: starttime,
            endDate: endDate,
          },
          cancelToken: new this.$axios.CancelToken(function executor(c) {
            if (that.cancelVocation) {
              that.cancelVocation();
            }
            that.cancelVocation = c;
          }),
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data != null) {
              this.industryValue = res.data.data.tradeRate;
              this.categoryValue = res.data.data.categoryRate;
            }
            this.finish02 = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //关联视频趋势图/销量趋势图
    LiveTrendData() {
      let that = this;
      this.xDataLoading = true;
      let starttime;
      let endtime;
      switch (this.value01) {
        case "近7天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 7, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "30天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 30, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "90天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 90, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        default:
          starttime = this.liveTime[0];
          endtime = this.liveTime[1];
          break;
      }
      this.$axios
        .get("api/Brand/LiveTrend", {
          params: {
            //brandId: "bb1c90e29227e0360010454c07653524",
            brandId: this.$route.query.id,
            startDate: starttime,
            endDate: endtime,
          },
          cancelToken: new this.$axios.CancelToken(function executor(c) {
            if (that.cancelLiveTrend) {
              that.cancelLiveTrend();
            }
            that.cancelLiveTrend = c;
          }),
        })
        .then((res) => {
          this.xDataLoading = false;
          if (res.data.code == 0) {
            if (res.data.data != null) {
              res.data.data.x.forEach((element) => {
                this.xData02.push(this.timestamp(element, "M/D"));
                return this.xData02;
              });
              this.y1Data02 = res.data.data.yvideo;
              this.y1Data03 = res.data.data.ylive;
              this.y1Data05 = res.data.data.ysalesLive;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  列表
    dataList(cpage) {
      let that = this;
      this.brandList = [];
      this.loading = true;
      if (cpage) {
        this.page = cpage;
      }
      let starttime;
      let endtime;
      switch (this.value01) {
        case "近7天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 7, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "30天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 30, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        case "90天":
          starttime = this.timestamp(Date.now() / 1000 - 86400 * 90, "Y-M-D");
          endtime = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          break;
        default:
          starttime = this.liveTime[0];
          endtime = this.liveTime[1];
          break;
      }
      this.$axios
        .post("api/Brand/DataList", {
          // brandId: "bb1c90e29227e0360010454c07653524",
          brandId: this.$route.query.id,
          startDate: starttime,
          endDate: endtime,

          page: this.page,
          size: "10",
          order_by: "desc",
          sort: "SummaryDate",
        },
        {
          cancelToken: new this.$axios.CancelToken(function executor(c) {
            if (that.cancelDataList) {
              that.cancelDataList();
            }
            that.cancelDataList = c;
          }),
        })
        .then((res) => {
          this.loading = false;

          if (res.data.code == 0) {
            this.brandList = res.data.data;
            this.count = res.data.count;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
#TheHeatAnalysis {
  height: 83vh;
  background-color: #fff;
  border-radius: 6px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  letter-spacing: 1px;
  padding-bottom: 14px;
  overflow: auto;

  .time_slot {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    .tab01 {
      margin-right: 20px;
    }
  }
  .dataNum {
    .dataBox {
      height: 120px;

      .boxNum {
        padding-top: 40px;
        width: 524px;
        height: 50px;
        margin: auto;
        display: flex;
        justify-content: space-around;
      }

      .data_item {
        text-align: center;
        padding-right: 83px;
        padding-left: 83px;
        border-right: 1px #efefef solid;
        span {
          font-size: 24px;
          font-weight: 600;
          color: #222222;
        }
        p {
          font-size: 12px;
          font-weight: normal;
          color: #888888;
          white-space: nowrap;
        }
      }
      .data_item:nth-child(3) {
        border: none;
      }
    }
  }
  .box-top {
    display: flex;
    align-items: center;
    height: 30px;
    span:nth-child(2) {
      width: 65px;
      font-size: 16px;
      letter-spacing: 0px;
      color: #222222;
      font-weight: 600;
      margin-right: 11px;
    }
    span:nth-child(3) {
      width: 259px;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #888888;
    }
  }
  .line {
    width: 4px;
    height: 16px;
    border-radius: 100px;
    margin-right: 6px;
    background-color: #fd7f2c;
  }
  .top {
    display: flex;
    margin-top: 37px;
  }
  .heatData {
    width: 32%;
    height: 224px;
    display: flex;
    // background-color: orange;

    .Item1 {
      margin: auto;
      text-align: center;
    }
    .Item1 > div:nth-child(1) {
      font-size: 26px;
      font-weight: 600;
      font-stretch: normal;

      letter-spacing: 1px;
      color: #222222;
    }
    .Item1 > div:nth-child(2) {
      font-size: 16px;
      letter-spacing: 0px;
      color: #888888;
    }
    img {
      width: 14px;
      height: 21px;
    }
  }
  .heatChart {
    width: 68%;
    height: 224px;

    .chartBox {
      width: 105%;
      height: 100%;
      margin-left: -15px;
    }
    .noData {
      padding: 27px;
    }
    // background-color: orangered;
  }
  .pie {
    display: flex;
    > div:nth-child(1) {
      width: 50%;
      height: 290px;

      .pie-01 {
        height: 290px;
      }
    }
    > div:nth-child(2) {
      width: 50%;
      height: 290px;

      .pie-01 {
        height: 290px;
      }
    }
    .noData {
      padding: 30px;
    }
  }
  .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-stretch: normal;
    margin-top: 20px;
    margin-bottom: 5px;
    letter-spacing: 0px;
    color: #222;
    font-weight: 600;
    span {
      display: inline-block;
      line-height: 28px;
    }

    img {
      width: 16px;
      height: 16px;
      margin-right: 3px;
    }
  }
  .lineAhart-01 {
    display: flex;
    .lineAhart_box {
      width: 50%;
      .lineAhart-01-1 {
        width: 100%;
        height: 290px;

        .chartBox {
          width: 99%;
          height: 100%;
          padding-left: 20px;
        }
      }
    }
  }
  .noDataImg {
    padding: 55px;
  }
  .salesAhart {
    .salesBox {
      width: 100%;
      height: 290px;
    }
  }
  .list_top {
    margin-top: 20px;
    box-sizing: border-box;
    background-color: #f5f9ff;
    li {
      font-size: 14px;
      color: #555;

      font-weight: 600;
      height: 48px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      div {
        width: 100%;
        text-align: center;
      }
    }

    li:last-child {
      padding-top: 2px;
      font-family: DINAlternate-Bold;
      font-size: 14px;
      //background-color: #f5f9ff;
      color: #555555;
    }
  }
  .list_bottom {
    font-family: DINAlternate-Bold;
    // height: 379px;
    // overflow-y: scroll;
    li {
      font-size: 14px;
      height: 54px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      box-sizing: border-box;
      div {
        width: 100%;
        text-align: center;
      }
    }
  }
  .paging {
    height: 35px;
    padding-top: 15px;
  }
}
</style>
